<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>游戏菜单</title>
		<link rel="stylesheet" type="text/css" href="css/menu.css"/>
		<link rel="stylesheet" type="text/css" href="css/game.css"/>
	</head>
	<body>
		<div class="menu" > 
		<label id="gameName">SakuraMetro</label>
		<!-- 主要按钮 -->
		<button type="button" class="mainButton" id="gameStart" onclick = "enterCharacterChoose()" >开始游戏</button>
		<button type="button" class="mainButton" id="checkMap" onclick = "goToStore()">商店/仓库</button>
		<button type="button" class="mainButton" id="explain" onclick = "goToDescription()">游戏说明</button>
		
		<!-- 设置按钮 -->
		<button type="button" class="setUpButton" id="return" onclick = "recover()" style="display: none;" ></button>
		
		 <!-- 选择角色按钮 -->
		<p id="chooseTitle" class="characterChooseBtn" style="display: none;">选择人物形象</p>
		<img id="rabbitChoose" src="imgs/mainCharacter/cuteballs/cat.png" alt="" class="characterChooseBtn" style="display: none;" >
		<button id = "choFox" style="font-size: 45px;display: none;" class="characterChooseBtn"   onclick="characterChoose1()">选择1</button>
		<img id="mouse" src="imgs/mainCharacter/cuteballs/mouse01.png" alt="" class="characterChooseBtn" style="display: none" >
		<button id = "choRabbit" style="font-size: 45px;display: none;" class="characterChooseBtn"  onclick="characterChoose2()">选择2</button>
		
		
		<div id="background" style="position:absolute; width:100%; height:100%; z-index:-1;left:0; top:0;">    
			<img src="img/huanghelou8.jpg" height="100%" width="100%" />
		</div>
		</div>
		<div class="mall" style="display: none;">
		
		<div class="header">
			<button id="btn" >金币</button>
			<div id="storage" onclick="changeToS()">仓库</div>
			<div id='score'></div>
		</div>
		<div class="main" >
			<img id="zhuangbei_1" src="img/zhuangbei.jpg" onclick="change_1()"/>
			<div id="btn1" >100$</div>
			<img id="zhuangbei_2" src="img/OIP%20(2).jpg" onclick="change_2()"/>
			<div id="btn2" >200$</div>
			<img id="zhuangbei_3" src="img/OIP%20(3).jpg" onclick="change_3()"/>
			<div id="btn3" >300$</div>
			<img id="zhuangbei_4" src="./img/OIP%20(4).jpg" onclick="change_4()"/>
			<div id="btn4" >400$</div>
			<img id="zhuangbei_5" src="./img/OIP%20(5).jpg" onclick="change_5()"/>
			<div id="btn5" >500$</div>
		</div>
		<div class="footer">
			<img src="img/rabbit%20.jpg" id="rabbit"/>
			<button id="asure" onclick="assure()">确认</button>
		</div>
		</div>
	<div class="scoreManage" style="display: none;">
		<progress max="100" style="width: 100%;height: 30px;"  value="0" id="pg"></progress>
		<progress max="100" style="width: 100%;height: 30px;background-color:green;"  value="100" id="pg0"></progress>
		
	</div>
	
	<div class="GameDescription" style="display: none;">
		<p id="description">玩家通过点击空白位置调整主角运动方向，避开地铁周围的垃圾，收集轨道上的食物。在地铁行驶过程中，根据地铁到达的不同站点，背景和食物转变成对应站点附近的特色景点和特色小吃。</p>
	</div> 
	
	<div class="success" style="display:none ;">
		<p id='overTitle'>游戏成功</p>
		<button type="button" id="successBtn" onclick = "location.reload(true);" >确认</button>
	</div>
	
	<div class="failure" style="display:none ;">
		<p id='overTitle'>游戏失败</p>
		<button type="button" id="successBtn" onclick = "location.reload(true);" >确认</button>
	</div>
	
	</body>
	<script type="text/javascript" src="js/phaser.min.js"></script>
	<script type="text/javascript" src = "js/menu.js"></script>
	<script type="text/javascript" src="js/gameScene.js"></script>
	<script type="text/javascript" src="js/mall.js"></script>
	
</html>

